<template>

  <div class="container" style="margin-top: 60px;">
<!--    <div style="">-->
<!--      <div v-for="item in list"><div><img style="width:100%;height:180px" :src="item.imgUrl"/></div></div>-->
<!--    </div>-->

    <div v-infinite-scroll="getTheme" style="overflow:auto;height:100%" infinite-scroll-distance="30" infinite-scroll-immediate="false">
      <div v-for="item in list" @click="toThemeMovie(item.id)"><div><img style="width:100%;height:180px" :src="item.imgUrl"/></div></div>
      <div v-if="loading" style="text-align: center;padding:8px;color:#919191;font-size: 14px">加载中...</div>
      <div v-if="finished" style="text-align: center;padding:8px;color:#919191;font-size: 14px">没有更多了</div>
      <div v-if="err" @click="getTheme" style="text-align: center;padding:8px;color:#919191;font-size: 14px">加载失败，点击重试</div>
    </div>
  </div>
</template>

<script>
  import {getByParam} from '@/api/theme'

  export default {
    name: 'Theme',
    components: {},
    computed: {

    },
    created() {
      this.getTheme();
    },
    data() {
      return {
        finished:false,
        err:false,
        loading:false,
        query:{
          curPage:1,
          pageSize:10
        },
        list:[]
      }
    },
    methods: {
      getTheme(){
        if(this.finished||this.loading){
          return;
        }
        this.err = false;
        this.finished = false;
        this.loading = true;
        console.log("加载：", this.query.curPage)
        getByParam(this.query).then(r1=>{
          console.log("r1",r1.data)
          this.query.curPage++;
          this.list = this.list.concat(r1.data.records);
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= r1.data.total) {
            this.finished = true;
          }
          this.total = r1.data.total;
        }).catch(err => {
          this.loading = false;
          this.err = true;
          console.log("失败")
        })
      },
      toThemeMovie(id){
        this.$router.push({path: '/themeMovie/' + id})
      }
    }
  }
</script>

<style scoped>
  .container{
    height:calc(100vh - 60px);
    background-color: white;
  }
</style>
